<template>
  <div>
    <div style="margin: 10px 0">
      <el-input
        style="width: 200px"
        placeholder="请输入名称"
        suffix-icon="el-icon-search"
        v-model="name"
      />
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="save">新增<i class="el-icon-circle-plus-outline"></i></el-button>
      <el-popconfirm
        confirm-button-text="好的"
        cancel-button-text="不用了"
        icon="el-icon-info"
        icon-color="red"
        title="这是一段内容确定删除吗？"
        @confirm="del2"
      >
        <template #reference>
          <el-button class="ml-5 mr-5" type="danger">批量删除<i class="el-icon-remove-outline"></i></el-button>
        </template>
      </el-popconfirm>
    </div>
    <el-table
      :data="tableData"
      border
      stripe
      :header-cell-class-name="'headerBg'"
      row-key="id"
      default-expand-all
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="path" label="路径" />
      <el-table-column prop="pagePath" label="页面路径" />
      <el-table-column label="图标" class-name="fontSize18" align="center" label-class-name="fontSize12">
        <template #default="scope">
          <span :class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="sortNum" label="顺序" />
      <el-table-column label="操作" width="300" align="center">
        <template #default="scope">
          <el-button
            type="primary"
            @click="handleAdd(scope.row.id)"
            v-if="!scope.row.pid && !scope.row.path"
          >
            新增子菜单 <i class="el-icon-plus"></i>
          </el-button>
          <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-popconfirm
            class="ml-5"
            confirm-button-text="确定"
            cancel-button-text="我再想想"
            icon="el-icon-info"
            icon-color="red"
            title="您确定删除吗？"
            @confirm="del(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- Form -->
    <el-dialog title="新增菜单" v-model="dialogFormVisible" width="30%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="form.path" autocomplete="off" />
        </el-form-item>
        <el-form-item label="页面路径">
          <el-input v-model="form.pagePath" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图标">
          <el-select clearable v-model="form.icon" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.value"
            >
              <i :class="item.value" /> {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.description" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="savaFalse">取 消</el-button>
          <el-button type="primary" @click="saveTure">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from "@/utils/request";
import { ElMessage } from 'element-plus'

const tableData = ref([])
const dialogFormVisible = ref(false)
const form = ref({})
const multipleSelection = ref([])
const name = ref("")
const options = ref([])

const load = () => {
  request.get("/menu", {
    params: {
      name: name.value,
    }
  }).then(res => {
    tableData.value = res.data
  })
}

const save = () => {
  dialogFormVisible.value = true
  form.value = {}
  getIcons()
}

const saveTure = () => {
  request.post("/menu", form.value).then(res => {
    if (res) {
      ElMessage.success("保存成功")
      dialogFormVisible.value = false
      load()
    } else {
      ElMessage.error("保存失败")
      dialogFormVisible.value = false
      load()
    }
  })
}

const savaFalse = () => {
  dialogFormVisible.value = false
  form.value = {}
}

const del = (id) => {
  request.delete("/menu/" + id).then(res => {
    if (res) {
      ElMessage.success("删除成功")
      load()
    } else {
      ElMessage.error("删除失败")
      load()
    }
  })
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

const del2 = () => {
  let ids = multipleSelection.value.map(item => item.id)
  request.post("/menu/batch", ids).then(res => {
    if (res) {
      ElMessage.success("批量删除成功")
      load()
    } else {
      ElMessage.error("批量删除失败")
      load()
    }
  })
}

const reset = () => {
  name.value = ""
  load()
}

const handleAdd = (pid) => {
  dialogFormVisible.value = true
  form.value = {}
  if (pid) {
    form.value.pid = pid
  }
  getIcons()
}

const handleEdit = (row) => {
  form.value = JSON.parse(JSON.stringify(row))
  dialogFormVisible.value = true
  getIcons()
}

const getIcons = () => {
  request.get("/menu/icons").then(res => {
    options.value = res.data
  })
}

onMounted(() => {
  load()
})
</script>

<style scoped>
</style>